<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>CSS相关 | 方歌阙的博客</title>
    <meta name="generator" content="VuePress 1.5.0">
    <link rel="icon" href="/touxiang2.jpg">
    <meta name="description" content="方歌阙 维基百科">
    <link rel="preload" href="/assets/css/0.styles.f2d9e938.css" as="style"><link rel="preload" href="/assets/js/app.395fbd21.js" as="script"><link rel="preload" href="/assets/js/2.cdd4cc35.js" as="script"><link rel="preload" href="/assets/js/9.44340b37.js" as="script"><link rel="prefetch" href="/assets/js/10.69995dd9.js"><link rel="prefetch" href="/assets/js/3.6437e748.js"><link rel="prefetch" href="/assets/js/4.c46efd11.js"><link rel="prefetch" href="/assets/js/5.786e34a2.js"><link rel="prefetch" href="/assets/js/6.23cdc19e.js"><link rel="prefetch" href="/assets/js/7.dac469cc.js"><link rel="prefetch" href="/assets/js/8.9db5607c.js">
    <link rel="stylesheet" href="/assets/css/0.styles.f2d9e938.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><!----> <span class="site-name">方歌阙的博客</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/" class="nav-link">
  首页
</a></div><div class="nav-item"><a href="/view/tech/" class="nav-link router-link-active">
  面试宝典
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="踩过的坑" class="dropdown-title"><span class="title">踩过的坑</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/view/javascript/" class="nav-link">
  javascript
</a></li></ul></div></div><div class="nav-item"><a href="https://www.jianshu.com/u/c455567c7f50" target="_blank" rel="noopener noreferrer" class="nav-link external">
  简书主页
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Concat" class="dropdown-title"><span class="title">Concat</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://segmentfault.com/u/mulander" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Segmentfault
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="GitHub" class="dropdown-title"><span class="title">GitHub</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://github.com/Mulander-J" target="_blank" rel="noopener noreferrer" class="nav-link external">
  GitHub首页
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li class="dropdown-item"><!----> <a href="https://mulander-j.github.io/island/code/html/index.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Island
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li class="dropdown-item"><!----> <a href="https://mulander-j.github.io/timeWaster/demo/index.html#/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  TimeWaster
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></div></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/" class="nav-link">
  首页
</a></div><div class="nav-item"><a href="/view/tech/" class="nav-link router-link-active">
  面试宝典
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="踩过的坑" class="dropdown-title"><span class="title">踩过的坑</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/view/javascript/" class="nav-link">
  javascript
</a></li></ul></div></div><div class="nav-item"><a href="https://www.jianshu.com/u/c455567c7f50" target="_blank" rel="noopener noreferrer" class="nav-link external">
  简书主页
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Concat" class="dropdown-title"><span class="title">Concat</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://segmentfault.com/u/mulander" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Segmentfault
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="GitHub" class="dropdown-title"><span class="title">GitHub</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://github.com/Mulander-J" target="_blank" rel="noopener noreferrer" class="nav-link external">
  GitHub首页
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li class="dropdown-item"><!----> <a href="https://mulander-j.github.io/island/code/html/index.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Island
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li class="dropdown-item"><!----> <a href="https://mulander-j.github.io/timeWaster/demo/index.html#/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  TimeWaster
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></div></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/view/tech/" aria-current="page" class="sidebar-link">前端面试宝典</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h2 id="_1-万能居中"><a href="#_1-万能居中" class="header-anchor">#</a> 1.万能居中</h2> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token property">margin</span><span class="token punctuation">:</span> 0 auto<span class="token punctuation">;</span>  <span class="token comment">/*水平*/</span>
<span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token comment">/*水平*/</span>
行高和高度相同  <span class="token comment">/*垂直*/</span>
表格，center<span class="token punctuation">,</span>middle<span class="token punctuation">;</span> <span class="token comment">/* 水平垂直 */</span>
<span class="token property">display</span><span class="token punctuation">:</span> table-cell<span class="token punctuation">;</span>  <span class="token comment">/* 模拟表格,all */</span>
绝对定位<span class="token punctuation">,</span> top<span class="token punctuation">,</span>left 都来50%减自身宽高
<span class="token property">绝对定位，上下左右全0，margin</span><span class="token punctuation">:</span>auto
绝对定位加相对定位。不需要知道宽高
<span class="token property">IE6，IE7：给父元素设一个font-size</span><span class="token punctuation">:</span>高度/1.14<span class="token punctuation">,</span><span class="token property">vertical-align</span><span class="token punctuation">:</span>middle
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><h2 id="_2-bfc优化"><a href="#_2-bfc优化" class="header-anchor">#</a> 2.<a href="https://www.jianshu.com/p/0d713b32cd0d" target="_blank" rel="noopener noreferrer">BFC优化<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></h2> <p>BFC 全称为 块格式化上下文 (Block Formatting Context)
特性:</p> <ul><li>使 BFC 内部浮动元素不会到处乱跑（清除浮动）；</li> <li>和浮动元素产生边界（在非浮动元素加margin）。</li></ul> <h2 id="_3-盒模型哪两种模式？什么区别？如何设置"><a href="#_3-盒模型哪两种模式？什么区别？如何设置" class="header-anchor">#</a> 3.盒模型哪两种模式？什么区别？如何设置</h2> <ul><li>W3C标准盒模型：box-sizing: content-box(默认); 宽高不包括内边距和边框
<img src="/img/tech/w3cbox.png" alt="W3C BOX"></li> <li>IE盒模型：box-sizing: border-box
<img src="/img/tech/iebox.png" alt="IE BOX"></li></ul> <h2 id="_4-常用清除浮动的方法，如不清除浮动会怎样？"><a href="#_4-常用清除浮动的方法，如不清除浮动会怎样？" class="header-anchor">#</a> 4.<a href="https://blog.csdn.net/h_qingyi/article/details/81269667" target="_blank" rel="noopener noreferrer">常用清除浮动的方法，如不清除浮动会怎样？<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></h2> <p>当父元素不给高度的时候，内部元素不浮动时会撑开, 而浮动的时候，父元素变成一条线, 造成塌陷.</p> <ul><li>给父元素设置固定高度 (扩展性不好不推荐)</li> <li>父元素添加overflow:hidden;  (触发BFC)</li> <li>在父元素最后增加一个空的块级子元素,并让它设置clear:both</li> <li>给父元素增加::after伪元素  (推荐)</li></ul> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.clear-fix::after</span><span class="token punctuation">{</span>
  <span class="token property">content</span><span class="token punctuation">:</span><span class="token string">''</span><span class="token punctuation">;</span>
  <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span>
  <span class="token property">clear</span><span class="token punctuation">:</span> both<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>  <span class="token comment">/* 兼容旧浏览器 */</span>
  <span class="token property">visibility</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span> <span class="token comment">/* 兼容旧浏览器 */</span>
<span class="token punctuation">}</span>

<span class="token selector">.clear-fix</span><span class="token punctuation">{</span>
  *<span class="token property">zoom</span><span class="token punctuation">:</span>1<span class="token punctuation">;</span> <span class="token comment">/* 兼容IE6~7 */</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main></div><div class="global-ui"></div></div>
    <script src="/assets/js/app.395fbd21.js" defer></script><script src="/assets/js/2.cdd4cc35.js" defer></script><script src="/assets/js/9.44340b37.js" defer></script>
  </body>
</html>
